<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            width: 700px;
            border: 1px solid #000;
            border-collapse: collapse;
            text-align: center
        }

        td,
        th {
            height: 50px;
            border: 1px solid #000;

        }
    </style>
    <script src="./jquery-1.12.3.min.js"></script>
</head>

<body>
    <label>行<input type="text" class="row"></label>
    <label>列<input type="text" class="col"></label>

    <button class='btn'>创建表格</button>

    <table class="table" cellspacing="0" cellpadding="0">
        <!-- <tr>
            <td><a href="javascript:">delete</a></td>
        </tr> -->
    </table>
    <script>
        let rand = function (min, max) {
            return Math.floor(Math.random() * (max - min) + min)
        }
        let randomColor = function () {
            let color = '#'
            let raw_str = "0123456789abcdef"
            let len = raw_str.length
            for (let i = 0; i < 6; i++) {
                color += raw_str.charAt(rand(0, len))
            }
            return color
        }

        let table = document.getElementsByClassName('table')[0]
        let row = document.getElementsByClassName('row')[0]
        let col = document.getElementsByClassName('col')[0]
        let btn = document.getElementsByClassName('btn')[0]

        btn.onclick = function () {
            let rowVal = row.value
            let colVal = col.value
            let frg = document.createDocumentFragment()
            for (let i = 0; i < rowVal; i++) {
                // 创建一个tr元素
                let tr = document.createElement('tr')

                // 通过循环给tr元素加td内容
                for (let j = 0; j < colVal; j++) {
                    let val = randomColor()
                    tr.innerHTML += `<td style="background: ${val}">${val}</td>`
                }
                tr.innerHTML+=(`<td><a href="javascript:">delete</a></td>`)
               
                // table每次追加一个tr
                frg.appendChild(tr)

            }
            table.appendChild(frg)
            // 释放table frg
            frg = null


            // 注意点：表格没有生成，a链接也是没有的。所以写在 btn.onclick 函数里面
            // 点击超链接a删除所在行
            let alink = document.querySelectorAll('a')
           
            alink.forEach(function (element, index) {
                console.log(this) //window 回调函数this默认是window
                element.onclick = function () {
                    this.parentNode.parentNode.remove()
                }
            })

            //remove自杀 删除自己和所有的子子孙孙
            // for (let i = 0; i < alink.length; i++) {
            //     alink[i].onclick = function () {
            //         console.log(i)
            //         console.log(alink)
            //         this.parentNode.parentNode.remove()
            //     }
            // }

        }



    </script>
</body>

</html>